<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="navbar-title">个人中心</text>
        <view class="navbar-actions">
          <uni-icons type="gear" size="20" color="#FFFFFF" @click="openSettings"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar-section">
          <view class="avatar" @click="changeAvatar">
            <uni-icons type="person-filled" size="40" color="#4980FF"></uni-icons>
          </view>
          <view class="user-details">
            <text class="user-name">{{ userInfo.name }}</text>
            <text class="user-role">{{ userInfo.role }}</text>
            <text class="user-company">{{ userInfo.company }}</text>
          </view>
        </view>
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-number">{{ userStats.approvalCount }}</text>
            <text class="stat-label">待审批</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">{{ userStats.equipmentCount }}</text>
            <text class="stat-label">设备数</text>
          </view>
          <view class="stat-item">
            <text class="stat-number">{{ userStats.projectCount }}</text>
            <text class="stat-label">项目数</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 快捷功能 -->
    <view class="quick-functions">
      <uni-section title="快捷功能" type="line">
        <uni-grid :column="4" :highlight="true" @change="onQuickFunctionClick">
          <uni-grid-item v-for="(item, index) in quickFunctions" :key="index">
            <view class="function-item">
              <uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
              <text class="function-text">{{ item.text }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-section>
    </view>
    
    <!-- 功能列表 -->
    <view class="function-list">
      <uni-section title="系统功能" type="line">
        <uni-list>
          <uni-list-item 
            v-for="(item, index) in functionList" 
            :key="index"
            :title="item.title"
            :note="item.note"
            :showArrow="true"
            @click="handleFunctionClick(item)">
            <template v-slot:header>
              <uni-icons :type="item.icon" size="20" :color="item.color"></uni-icons>
            </template>
            <template v-slot:footer v-if="item.extra">
              <uni-tag :text="item.extra" size="small" type="primary"></uni-tag>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>
    </view>
    
    <!-- 系统信息 -->
    <view class="system-info">
      <uni-section title="系统信息" type="line">
        <uni-list>
          <uni-list-item 
            title="当前版本"
            :rightText="systemInfo.version"
            :showArrow="true"
            @click="checkUpdate">
            <template v-slot:header>
              <uni-icons type="info" size="20" color="#4980FF"></uni-icons>
            </template>
          </uni-list-item>
          <uni-list-item 
            title="关于我们"
            :showArrow="true"
            @click="showAbout">
            <template v-slot:header>
              <uni-icons type="help" size="20" color="#4ECDC4"></uni-icons>
            </template>
          </uni-list-item>
          <uni-list-item 
            title="隐私协议"
            :showArrow="true"
            @click="showPrivacy">
            <template v-slot:header>
              <uni-icons type="locked" size="20" color="#FF6B6B"></uni-icons>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>
    </view>
    
    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <uni-button 
        type="warn" 
        size="large" 
        @click="handleLogout"
        :custom-style="{ backgroundColor: '#FF6B6B', borderColor: '#FF6B6B' }">
        退出登录
      </uni-button>
    </view>
    
    <!-- 版权信息 -->
    <view class="copyright">
      <text class="copyright-text">{{ systemInfo.copyright }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '管理员',
        role: '系统管理员',
        company: '天顺路桥信息化平台'
      },
      userStats: {
        approvalCount: 8,
        equipmentCount: 156,
        projectCount: 12
      },
      quickFunctions: [
        { text: '我的审批', icon: 'paperplane', color: '#4980FF' },
        { text: '设备管理', icon: 'gear', color: '#4ECDC4' },
        { text: '物料管理', icon: 'shop', color: '#FF6B6B' },
        { text: '计量管理', icon: 'chart', color: '#FFA500' }
      ],
      functionList: [
        { title: '账号与安全', note: '管理账号安全设置', icon: 'locked', color: '#4980FF' },
        { title: '消息通知', note: '管理消息推送设置', icon: 'notification', color: '#4ECDC4', extra: '3条未读' },
        { title: '数据同步', note: '同步本地数据到云端', icon: 'cloud-upload', color: '#FF6B6B' },
        { title: '清除缓存', note: '清理应用缓存数据', icon: 'trash', color: '#FFA500' }
      ],
      systemInfo: {
        version: 'V1.0.1',
        copyright: 'Copyright © 2024 天顺路桥. All rights reserved.'
      }
    }
  },
  methods: {
    changeAvatar() {
      uni.showActionSheet({
        itemList: ['拍照', '从相册选择'],
        success: (res) => {
          uni.showToast({
            title: '头像更换功能开发中',
            icon: 'none'
          })
        }
      })
    },
    onQuickFunctionClick(e) {
      const function_ = this.quickFunctions[e.detail.index]
      switch(function_.text) {
        case '我的审批':
          uni.switchTab({ url: '/pages/approval/index' })
          break
        case '设备管理':
          uni.switchTab({ url: '/pages/equipment/index' })
          break
        case '物料管理':
          uni.navigateTo({ url: '/pages/material/index' })
          break
        case '计量管理':
          uni.navigateTo({ url: '/pages/metering/index' })
          break
      }
    },
    handleFunctionClick(item) {
      switch(item.title) {
        case '账号与安全':
          this.openAccountSecurity()
          break
        case '消息通知':
          this.openNotificationSettings()
          break
        case '数据同步':
          this.syncData()
          break
        case '清除缓存':
          this.clearCache()
          break
      }
    },
    openSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      })
    },
    openAccountSecurity() {
      uni.showToast({
        title: '账号安全功能开发中',
        icon: 'none'
      })
    },
    openNotificationSettings() {
      uni.showToast({
        title: '通知设置功能开发中',
        icon: 'none'
      })
    },
    syncData() {
      uni.showLoading({ title: '同步中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '数据同步完成',
          icon: 'success'
        })
      }, 2000)
    },
    clearCache() {
      uni.showModal({
        title: '确认清除',
        content: '确定要清除应用缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '清除中...' })
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({
                title: '缓存清除完成',
                icon: 'success'
              })
            }, 1000)
          }
        }
      })
    },
    checkUpdate() {
      uni.showLoading({ title: '检查中...' })
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '已是最新版本',
          icon: 'success'
        })
      }, 1000)
    },
    showAbout() {
      uni.showModal({
        title: '关于我们',
        content: '天顺路桥信息化平台\n版本：V1.0.1\n为工程建设提供智能化管理解决方案',
        showCancel: false
      })
    },
    showPrivacy() {
      uni.showModal({
        title: '隐私协议',
        content: '我们重视您的隐私保护，详细协议请访问官网查看。',
        showCancel: false
      })
    },
    handleLogout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户数据
            uni.clearStorageSync()
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/login'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #F5F7FA;
  min-height: 100vh;
}

.custom-navbar {
  background: linear-gradient(135deg, #4980FF 0%, #2B6BFF 100%);
  padding-top: 44px;
  padding-bottom: 16px;
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.navbar-title {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
}

.navbar-actions {
  display: flex;
  gap: 16px;
}

.user-card {
  margin: 16px;
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 60px;
  height: 60px;
  background-color: rgba(73, 128, 255, 0.1);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.user-role {
  font-size: 14px;
  color: #666;
}

.user-company {
  font-size: 12px;
  color: #999;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 16px;
  border-top: 1px solid #F0F0F0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.stat-number {
  font-size: 20px;
  font-weight: 600;
  color: #4980FF;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.quick-functions {
  margin: 16px;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px;
  gap: 8px;
}

.function-text {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.function-list {
  margin: 16px;
}

.system-info {
  margin: 16px;
}

.logout-section {
  margin: 32px 16px 16px;
}

.copyright {
  text-align: center;
  padding: 16px;
}

.copyright-text {
  font-size: 12px;
  color: #999;
}
</style> 